<template>
  <section id="about" class="about">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">关于我</h2>
        <p class="section-subtitle">
          充满激情的前端开发者，专注于创造卓越的用户体验
        </p>
      </div>

      <div class="about-content">
        <div class="about-main">
          <div class="about-text">
            <h3 class="about-heading"><UserOutlined /> 个人简介</h3>
            <p class="about-description">
              我是一名充满激情的前端开发工程师，拥有3年的丰富开发经验。专注于Vue.js生态系统和现代前端技术栈，
              致力于创造优雅、高效且用户友好的Web应用。我相信优秀的代码不仅要功能完善，更要具备良好的可读性和可维护性。
            </p>
            <p class="about-description">
              在工作中，我注重团队协作，善于沟通，能够快速理解业务需求并提供技术解决方案。
              我热爱学习新技术，关注行业发展趋势，不断提升自己的技术能力和设计思维。
            </p>

            <div class="about-values">
              <div class="value-item" v-for="value in values" :key="value.title">
                <div class="value-icon">
                  <component :is="value.icon" />
                </div>
                <div class="value-content">
                  <h4 class="value-title">{{ value.title }}</h4>
                  <p class="value-description">{{ value.description }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="about-skills">
            <h3 class="skills-heading"><ToolOutlined /> 技术栈</h3>

            <div class="skills-categories">
              <div class="skill-category" v-for="category in skillCategories" :key="category.name">
                <h4 class="category-title">{{ category.name }}</h4>
                <div class="skill-items">
                  <div
                    class="skill-item"
                    v-for="skill in category.skills"
                    :key="skill.name"
                    :style="{ '--skill-level': skill.level + '%' }"
                  >
                    <div class="skill-info">
                      <span class="skill-name">{{ skill.name }}</span>
                      <span class="skill-level-text">{{ skill.level }}%</span>
                    </div>
                    <div class="skill-bar">
                      <div class="skill-progress"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="about-experience">
          <h3 class="experience-heading"><CalendarOutlined /> 工作经历</h3>
          <div class="timeline">
            <div
              class="timeline-item"
              v-for="(exp, index) in experience"
              :key="index"
              :class="{ 'timeline-item-left': index % 2 === 0, 'timeline-item-right': index % 2 === 1 }"
            >
              <div class="timeline-marker"></div>
              <div class="timeline-content">
                <div class="timeline-date">{{ exp.period }}</div>
                <h4 class="timeline-title">{{ exp.title }}</h4>
                <p class="timeline-company">{{ exp.company }}</p>
                <p class="timeline-description">{{ exp.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { UserOutlined, ToolOutlined, CalendarOutlined, CodeOutlined, DatabaseOutlined, AppleOutlined } from '@ant-design/icons-vue'

interface Skill {
  name: string
  level: number
}

interface SkillCategory {
  name: string
  skills: Skill[]
}

interface Value {
  title: string
  description: string
  icon: any
}

interface Experience {
  period: string
  title: string
  company: string
  description: string
}

const values: Value[] = [
  {
    title: '用户至上',
    description: '始终将用户体验放在首位，追求直观、流畅的交互设计',
    icon: AppleOutlined
  },
  {
    title: '代码质量',
    description: '注重代码的可读性、可维护性和性能优化',
    icon: CodeOutlined
  },
  {
    title: '持续学习',
    description: '保持对新技术的学习热情，不断提升技术能力',
    icon: DatabaseOutlined
  }
]

const skillCategories: SkillCategory[] = [
  {
    name: '前端框架',
    skills: [
      { name: 'Vue.js 3', level: 95 },
      { name: 'TypeScript', level: 90 },
      { name: 'React', level: 75 },
      { name: 'Angular', level: 60 }
    ]
  },
  {
    name: '核心技术',
    skills: [
      { name: 'JavaScript ES6+', level: 95 },
      { name: 'HTML5/CSS3', level: 90 },
      { name: 'Webpack/Vite', level: 85 },
      { name: 'Node.js', level: 80 }
    ]
  },
  {
    name: '工具与库',
    skills: [
      { name: 'Ant Design Vue', level: 90 },
      { name: 'Pinia/Vuex', level: 85 },
      { name: 'Git/GitHub', level: 90 },
      { name: 'Jest/Vitest', level: 75 }
    ]
  }
]

const experience: Experience[] = [
  {
    period: '2022 - 至今',
    title: '高级前端开发工程师',
    company: '科技创新有限公司',
    description: '负责公司核心产品的前端架构设计和开发，带领团队完成多个重要项目，提升产品性能和用户体验。'
  },
  {
    period: '2021 - 2022',
    title: '前端开发工程师',
    company: '互联网科技公司',
    description: '参与多个Web应用的开发，主要负责Vue.js项目的前端开发和维护，积累了丰富的项目经验。'
  },
  {
    period: '2020 - 2021',
    title: '初级前端开发工程师',
    company: '软件开发公司',
    description: '学习并掌握前端开发技能，参与公司官网和管理后台的开发，为职业生涯打下坚实基础。'
  }
]
</script>

<style scoped>
.about {
  padding: 6rem 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.about-content {
  display: grid;
  gap: 4rem;
}

.about-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.about-text,
.about-skills {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}

.about-heading,
.skills-heading,
.experience-heading {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.about-description {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.about-values {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.value-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.value-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.value-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.value-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

.skills-categories {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.category-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.skill-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skill-item {
  margin-bottom: 1rem;
}

.skill-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.skill-name {
  font-weight: 500;
  color: var(--text-primary);
}

.skill-level-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.skill-bar {
  height: 8px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
  width: var(--skill-level);
  transition: width 1s ease-out;
}

.about-experience {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  margin-top: 2rem;
}

.timeline {
  position: relative;
  padding: 2rem 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  margin-bottom: 2rem;
  width: 50%;
}

.timeline-item-left {
  left: 0;
  padding-right: 2rem;
}

.timeline-item-right {
  left: 50%;
  padding-left: 2rem;
}

.timeline-marker {
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.timeline-item-left .timeline-marker {
  right: -8px;
}

.timeline-item-right .timeline-marker {
  left: -8px;
}

.timeline-content {
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
}

.timeline-date {
  font-size: 0.9rem;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.timeline-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.timeline-company {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  font-weight: 500;
}

.timeline-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .about-main {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline-item {
    width: 100%;
    left: 0 !important;
    padding-left: 3rem !important;
    padding-right: 0 !important;
  }

  .timeline-marker {
    left: 12px !important;
    right: auto !important;
  }

  .section-title {
    font-size: 2rem;
  }
}
</style>

<style>
:root {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --text-primary: #2d3748;
  --text-secondary: #718096;
  --bg-primary: #ffffff;
  --bg-secondary: #f7fafc;
}
</style>